<template>
<div>
  <div class="wait" v-show="waitShow">
    <span>代办事项</span>
  </div>
  <ul class="todo-main" v-show="waitShow">
    <Item v-for="item in waits" :key="item.id" :todo="item" :removeTodo="removeTodo" :updateTodo="updateTodo"  :isDone="isDone"></Item>
  </ul>
  <div class="finish" v-show="finishShow">
    <hr>
    <span>已完成事项</span>
  </div>
  <ul class="todo-main" v-show="finishShow">
    <Finish v-for="item in finishes" :key="item.id" :finish="item" :removeTodo="removeTodo"  :updateTodo="updateTodo"  :isDone="isDone"></Finish>
  </ul>
</div>
</template>

<script>
import Item from '@/components/Item.vue'
import Finish from '@/components/Finish.vue'

export default {
  name: 'Lists-hello',
  props: {
    todos: Array,
    removeTodo: Function,
    updateTodo: Function,
    isDone: Function
  },
  components: {
    Item,
    Finish
  },
  computed: {
    waits () {
      return this.todos.filter(item => !item.done)
    },
    finishes () {
      return this.todos.filter(item => item.done)
    },
    waitShow () {
      if (this.waits.length === 0) {
        return false
      }
      return true
    },
    finishShow () {
      if (this.finishes.length === 0) {
        return false
      }
      return true
    }
  }
}
</script>

<style lang="less" scoped>
.todo-main{
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}
.wait,.finish{
    margin: 10px 0;
  }
</style>
